<template>
  <view v-if="shenheStatus == 0" class="collection_container">
    <view class="top_box">
      <u-row>
        <u-col span="4"
          ><u-tabs
            :list="list"
            :is-scroll="false"
            :current="current"
            @change="change"
            active-color="#F2270C"
          ></u-tabs
        ></u-col>
        <u-col span="8">
          <text
            style="float: right; margin-right: 30rpx"
            :style="{ color: isOnEdit ? 'red' : '' }"
            @click="onEdit"
            >{{ isOnEdit ? $t("person.cancle") : $t("cart.edit") }}</text
          >
        </u-col>
      </u-row>
    </view>
    <view class="">
      <GoodsCollList
        ref="list0"
        v-if="!current"
        :isEdit="isOnEdit"
        :isCheckAll="isCheckAll"
        @checkChange="checkChange"
        @allChecked="allChecked"
      ></GoodsCollList>
      <!-- <ShopCollList
        ref="list1"
        v-else
        :isEdit="isOnEdit"
        :isCheckAll="isCheckAll"
        @checkChange="checkChange"
        @allChecked="allChecked"
      ></ShopCollList> -->
    </view>
    <view class="bottom_actions" v-show="isOnEdit">
      <view class="left">
        <image
          class="del"
          :src="
            isCheckAll ? asyncImgs.history.checked : asyncImgs.history.unchecked
          "
          mode=""
          style="width: 40rpx; height: 40rpx; margin-right: 10rpx"
          @click="checkAll()"
        ></image>
        {{ $t("cart.all") }}
      </view>
      <view class="right" @click="showAction = true"
        >{{ $t("goods.cancleCollect") }}({{ checkedItem.length }})</view
      >
      <view style="clear: both"></view>
    </view>
    <u-action-sheet
      :list="actionList"
      v-model="showAction"
      @click="click"
    ></u-action-sheet>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import GoodsCollList from "./components/good_coll_list.vue";
import ShopCollList from "./components/shop_coll_list.vue";
export default {
  components: {
    GoodsCollList,
    ShopCollList,
    Shenhe,
  },
  data() {
    return {
      actionList: [
        {
          text: "",
          subText: this.$t("person.cancleCollection"),
        },
        {
          text: this.$t("cart.delete"),
          color: "#FF4222",
        },
      ],
      showAction: false,
      isCheckAll: false,
      isOnEdit: false,
      list: [
        {
          name: this.$t("goods.goods"),
        },
        // {
        //   name: this.$t('common.store'),
        // },
      ],
      current: 0,
      checkedItem: [],
    };
  },
  watch: {},
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t("title.collection"),
    });
  },
  methods: {
    async removeFav(id) {
      try {
        uni.showLoading({
          title: this.$t("user.del"),
          mask: true,
        });
        const res = await this.$allrequest.user.removeFavorite({
          id,
        });
        uni.hideLoading();
        this.isCheckAll = false;
        this.onEdit();
        this.$refs["list" + this.current].getListData();
      } catch (e) {
        //TODO handle the exception
      }
    },
    click(index) {
      if (index == 1) {
        this.removeFav(this.checkedItem.map((item) => item.id));
      }
    },
    allChecked(val) {
      this.isCheckAll = val;
    },
    checkChange(val) {
      this.checkedItem = val;
    },
    checkAll() {
      this.isCheckAll = !this.isCheckAll;
    },
    onEdit() {
      this.isOnEdit = !this.isOnEdit;
    },
    change(index) {
      this.current = index;
      this.isOnEdit = false;
      this.checkedItem = [];
      this.isCheckAll = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom_actions {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10rpx;
  line-height: 80rpx;
  .left {
    float: left;
    .del {
      display: inline-block;
      transform: translateY(10rpx);
    }
  }
  .right {
    display: inline-block;
    padding: 0 30rpx;
    float: right;
    background: linear-gradient(90deg, #f2150c, #f24c0c);
    color: #fff;
    border-radius: 50rpx;
  }
}
.top_box {
  height: 100rpx;
  margin-bottom: 30rpx;
  line-height: 100rpx;
  background-color: #fff;
  border-bottom-left-radius: 28rpx;
  border-bottom-right-radius: 28rpx;
}
.collection_container {
  min-height: 100vh;
  background-color: rgb(242, 242, 242);
}
</style>
